<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    省份：
    <select id="provinceId">
      <option>---请选择省份--</option>
    </select>
    城市：
    <select id="cityId">
      <option>---请选择城市--</option>
    </select>
    区县：
    <select id="areaId">
      <option>---请选择区县--</option>
    </select>
    <script src="/static/jquery-2.1.4.js" type="text/javascript" charset="UTF-8"></script>
    <script>
      $(function () {
        $.post(
            '/ajax3?method=selectProvince',
            function (jsonObj) {
                  console.log(jsonObj);
                  $(jsonObj).each(function () {
                    // <option value="111">山东省</option>
                    $('#provinceId').append('<option value="'+this.id+'">'+this.name+'</option>');
                  })
            },
            'json'
        );

        $('#provinceId').change(function (){
            $.post(
                '/ajax3?method=selectCity',
                {'provinceId': $(this).val()},
                function (jsonObj) {
                    console.log(jsonObj);
                    $('#cityId option:not(:first)').remove();
                    $(jsonObj).each(function () {
                        $('#cityId').append('<option value="'+this.id+'">'+this.name+'</option>');
                    })
                },
                'json'
            );
        });

          $('#cityId').change(function (){
              $.post(
                  '/ajax3?method=selectArea',
                  {'cityId': $(this).val()},
                  function (jsonObj) {
                      console.log(jsonObj);
                      $('#areaId option:not(:first)').remove();
                      $(jsonObj).each(function () {
                          $('#areaId').append('<option value="'+this.id+'">'+this.name+'</option>');
                      })
                  },
                  'json'
              );
          });
      })
    </script>
</body>
</html>
